<template>
  <div>
    <vxe-toolbar :refresh="{query: reload}">
      <template #buttons>
        <vxe-button @click="insertEvent">+ 新增节点</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      v-if="init"
      resizable
      highlight-hover-row
      highlight-current-row
      show-overflow
      keep-source
      ref="xTree"
      row-id="path"
      :loading="loading"
      :tree-config="{
        children: 'children',
        lazy: true,
        line: true,
        reserve: true,
        expandRowKeys: defaultExpandRowKeys,
        hasChild: 'hasChild',
        loadMethod: loadChildrenMethod
      }"
      :data="tableData"
      @toggle-tree-expand="toggleTreeExpand"
    >
      <vxe-column field="key" title="节点名称" tree-node></vxe-column>
      <vxe-column field="value" title="Value"></vxe-column>
      <vxe-column title="操作" show-overflow>
        <template #default="{ row }">
          <vxe-button content="添加下级节点" @click="addChildNode(row)"></vxe-button>
          <vxe-button content="设置" @click="editNodeEvent(row)"></vxe-button>
          <vxe-button content="删除" status="danger" @click="deleteNode(row)"></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-modal v-model="addNodeShow" title="添加节点">
      <template #default>
        <div style="display: flex; flex-direction: row; align-items: center">
          <div style="width: 100px"><span style="color: red">*</span>Path:</div>
          <div style="flex: 1; display: flex; flex-direction: row; align-items: center">
            <div>{{ addData.pPath }}</div>
            <div style="flex: 1; margin-left: 10px;">
              <vxe-input v-model="addData.path" style="width: 100%"></vxe-input>
            </div>
          </div>
        </div>
        <div style="display: flex; flex-direction: row; align-items: center; margin-top: 10px">
          <div style="width: 100px"><span>&nbsp;&nbsp;</span>Value:</div>
          <div style="flex:1;">
            <vxe-textarea v-model="addData.value" style="width: 100%"></vxe-textarea>
          </div>
        </div>
        <div style="margin-top: 20px; display: flex; flex-direction: row-reverse">
          <vxe-button content="取消" style="margin-left: 10px" @click="addNodeShow = false"></vxe-button>
          <vxe-button status="primary" content="保存" @click="addNode"></vxe-button>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal v-model="editNodeShow" title="编辑节点信息">
      <template #default>
        <div style="display: flex; flex-direction: row; align-items: center">
          <div style="width: 100px"><span style="color: red">*</span>Path:</div>
          <div style="flex: 1; display: flex; flex-direction: row; align-items: center">
            <div>{{ editData.path }}</div>
          </div>
        </div>
        <div style="display: flex; flex-direction: row; align-items: center; margin-top: 10px">
          <div style="width: 100px"><span>&nbsp;&nbsp;</span>Value:</div>
          <div style="flex:1;">
            <vxe-textarea v-model="editData.value" style="width: 100%"></vxe-textarea>
          </div>
        </div>
        <div style="margin-top: 20px; display: flex; flex-direction: row-reverse">
          <vxe-button content="取消" style="margin-left: 10px" @click="editNodeShow = false"></vxe-button>
          <vxe-button status="primary" content="保存" @click="editNode"></vxe-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import {getZooChildren, addNodeApi, editNodeApi, deleteNodeApi} from "@/api/zoo"

export default {
  name: "index",
  data() {
    return {
      init: true,
      addNodeShow: false,
      editNodeShow: false,
      loading: false,
      addData: {
        pPath: '',
        path: '',
        value: ''
      },
      editData: {
        path: '',
        value: ''
      },
      defaultExpandRowKeys: [],
      tableData: [],
      removeList: [],
    }
  },
  created() {
    this.findList()
  },
  methods: {
    loadChildrenMethod({row}) {
      return new Promise(resolve => {
        getZooChildren({
          path: row.path
        }).then(res => {
          resolve(res.data.message)
        })
      })
    },
    findList() {
      this.loading = true
      return new Promise(resolve => {
        getZooChildren({
          path: '/'
        }).then(res => {
          this.tableData = res.data.message
          this.loading = false
          this.$refs.xTree.reloadData(this.tableData)
          resolve(res)
        })
      })
    },
    getPRow(row){
      // 获取父级的row
      let pPathFun = () => {
        let pArr = row.path.split('/')
        pArr.splice(pArr.length - 1)
        console.log(pArr)
        return pArr.join('/')
      }
      let pRow
      let pPath = pPathFun();
      if( pPath !== '/' ){
        let records = this.$refs.xTree.getTreeExpandRecords()
        for( let item of records ){
          if( item.path === pPath ){
            pRow = item
            break;
          }
        }
      }
      return pRow
    },
    editNodeEvent(row) {
      // 获取父级的row
      let pRow = this.getPRow(row)
      this.editData = {
        pRow,
        pPath: pRow ? pRow.path : '/',
        path: row.path,
        value: row.value
      }
      this.editNodeShow = true
    },
    addChildNode(row) {
      this.addData = {
        pRow: row,
        pPath: row.path + '/',
        path: '',
        value: ''
      }
      this.addNodeShow = true
    },
    insertEvent() {
      this.addData = {
        pPath: '/',
        path: '',
        value: ''
      }
      this.addNodeShow = true
    },
    // 保存节点
    addNode() {
      addNodeApi(this.addData).then(res => {
        this.$XModal.message({content: res.data.message, status: 'success'})
        if( this.addData.pPath === '/' ){
          this.reload()
        }else{
          this.addData.pRow.hasChild = true
          this.$refs.xTree.reloadTreeChilds(this.addData.pRow);
        }
        this.addNodeShow = false
      }).catch(e => {
        this.$XModal.alert({
          content: e.response.data.message,
          title: '错误提示',
          status: 'error'
        })
      })

    },
    // 编辑节点
    editNode() {
      editNodeApi(this.editData).then(res => {
        this.$XModal.message({content: res.data.message, status: 'success'})
        if( this.editData.pRow ){
          this.$refs.xTree.reloadTreeChilds(this.editData.pRow);
        }else{
          this.reload()
        }
        this.editNodeShow = false
      }).catch(e => {
        this.$XModal.alert({
          content: e.response.data.message,
          title: '错误提示',
          status: 'error'
        })
      })
    },
    // 删除节点
    deleteNode(row) {
        this.$XModal.confirm('您确定要删除该节点?').then(type => {
          const $table = this.$refs.xTree
          if (type === 'confirm') {
            deleteNodeApi({
              path: row.path
            }).then(res => {
              this.$XModal.message({content: res.data.message, status: 'success'})
              // 获取父级的row

              let pRow = this.getPRow(row)
              if( pRow ){
                this.$refs.xTree.reloadTreeChilds(pRow);
              }else{
                $table.remove(row)
                // this.reload()
              }
              this.editNodeShow = false
            }).catch(e => {
              this.$XModal.alert({
                content: e.response.data.message,
                title: '错误提示',
                status: 'error'
              })
            })
          }
        })

    },
    toggleTreeExpand(e) {
    },
    reload() {
      // 清除所有状态
      // this.$refs.xTree.clearAll()
      return this.findList()
    }
  }
}
</script>

<style scoped>

</style>
